<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>热销时装</title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			.all{
				width: 680px;
				border: 1px solid red;
				margin: 30px auto;
			}
			.se1 a{
				color: #724b4b;
				text-decoration: none;
			}
			.se2 a{
				font-weight: lighter;
				font-size: 12px;
				color: black;
				text-decoration: none;
			}
			li{
				list-style: none;
				
			}
			.first{
				border: 1px solid yellow;
				box-sizing: border-box;
				
				height: 320px;
				width: 220px;
			}
			.xin1{
				padding-left: 20px;
				padding-top: 50px;
			}
			.xin2{
				padding-left: 20px;
				padding-top: 20px;
			}
			.pic1{
				padding-left: 40px;
				padding-top: 60px;
			}
			.second,.third,.four,.five{
				border: 1px solid yellow;
				box-sizing: border-box;
				position: relative;
				height: 160px;
				width: 230px;
				float: left;
			}
			.biao1,.jiadian1,.huazhuang1,.yibao1{
				padding-left: 20px;
				padding-top: 20px;
			}
			.biao2,.jiadian2,.huazhuang2,.yibao2{
				padding-left: 20px;
				padding-top: 10px;
			}
			.pic2,.pic3,.pic4,.pic5{
				position: absolute;
				top: 40px;
				left: 110px;
			}
			.right{
				width: 460px;
				float: left;
			}
			.left{
				float: left;
			}
			.clearfix:after{
				display: table;
				clear: both;
				content: "";
			}
			img{
				transition: all 1s ease-out;
			}
			img:hover{
				transform: translateX(-12px);
			}
		</style>
	</head>
	<body>
		<div class="all">
				<ul class="clearfix">
					<div class="left">
					<li>
						<div class="first">
							<div class="xin1 se1"><a href="#">超级信用卡</a></div>
							<div class="xin2 se2"><a href="#">线上线下课累计彩贝积分</a></div>
							<div class="pic1"><a href="#"><img src="img3/1.bmp" /></a></div>
						</div>
					</li>
					</div>
					<div class="right clearfix">
					<li>
						<div class="second">
							<div class="biao1 se1"><a href="#">彩贝抢霸</a></div>
							<div class="biao2 se2"><a href="#">每天10点更新</a></div>
							<div class="pic2"><a href="#"><img src="img3/2.bmp" /></a></div>
						</div>
					</li>
					<li>
						<div class="third">
							<div class="jiadian1 se1"><a href="#">热门优惠劵</a></div>
							<div class="jiadian2 se2"><a href="#">全场免费领取</a></div>
							<div class="pic3"><a href="#"><img src="img3/3.bmp" /></a></div>
						</div>
					</li>
					<li>
						<div class="four">
							<div class="huazhuang1 se1"><a href="#">热门优惠劵</a></div>
							<div class="huazhuang2 se2"><a href="#">全场免费领取</a></div>
							<div class="pic4"><a href="#"><img src="img3/4.bmp" /></a></div>
						</div>
					</li>
					<li>
						<div class="five">
							<div class="yibao1 se1"><a href="#">热门优惠劵</a></div>
							<div class="yibao2 se2"><a href="#">全场免费领取</a></div>
							<div class="pic5"><a href="#"><img src="img3/5.bmp" /></a></div>
						</div>
					</li>
					</div>
				</ul>		
			
		</div>
	</body>
</html>
